<template>
	<view class="phone">
		<view class="phone_search">
			<input type="text" v-model="phoneNumber" placeholder="请输入您所要查询的号码" />
			<button @click="tips()" type="primary">查询</button>
		</view>
		<view class="table" v-if="isShow">
			<view class="row">
				<view class="left">查询号码</view>
				<view class="right">{{phoneDetailList.phone}}</view>
			</view>
			<view class="row">
				<view class="left"> 所属地</view>
				<view class="right">
					{{phoneDetailList.province}} - {{phoneDetailList.city}}
				</view>
			</view>
			<view class="row">
				<view class="left">所属运营商</view>
				<view class="right">{{phoneDetailList.sp}}</view>
			</view>
			<view class="row">
				<view class="left">邮政编码</view>
				<view class="right">{{phoneDetailList.postcode}}</view>
			</view>
			<view class="row">
				<view class="left">区号</view>
				<view class="right">{{phoneDetailList.tel_prefix}}</view>
			</view>
		</view>
		<text class="noShow" v-else="isShow">还没有查询哟！！</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: "",
				phoneDetailList: [],
				isShow: false
			}
		},
		methods: {
			// 提示输入内容不能为空
			tips() {
				if (this.phoneNumber !== '') {
					this.getContent();
				} else {
					uni.showToast({
						title: '不能为空哟',
						icon: 'none'
					});
				}
			},
			async getContent() {
				const res = await this.$myRequest({
					url: "/?&s=App.Common_Phone.QueryLocation",
					method: "post",
					data: {
						phone: this.phoneNumber,
						app_key: "FF119DFB40E63EE8DFD7C74C8A9A4B8D"
					}
				})
				const phoneDetailList = res.data.data.info
				if(phoneDetailList.city !== undefined){
					this.phoneDetailList = phoneDetailList;
					this.isShow = true;
				}else{
					uni.showToast({
						title: '没有查询到数据',
						icon: 'none'
					});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.phone_search {
		width: 85%;
		height: 80rpx;
		display: flex;
		margin: 30rpx auto;

		input {
			border: 1rpx solid #eee;
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-right: 10rpx;
			border-radius: 20rpx;
		}

		button {
			height: 100%;
			border: none;
			line-height: 80rpx;
		}
	}

	.noShow {
		display: block;
		text-align: center;
	}

	.table {
		margin-top: 40rpx;

		.row {
			width: 80%;
			height: 80rpx;
			margin: 0 auto;
			display: flex;
			padding: 0 20rpx;
			text-align: center;
			line-height: 80rpx;
			border: 1px solid #eee;
			border-top: none;

			.left {
				width: 30%;
				height: 100%;
				border-right: 1px solid #eee;
				font-size: 30rpx;
			}

			.right {
				width: 70%;
				height: 100%;
			}
		}

		.row:nth-child(1) {
			border-top: 1px solid #eee;
		}
	}
</style>
